import { useStore } from "vuex";
import { computed } from "vue";
//   鼠标移动控制进度条
export default function () {
    const store = useStore();

    //    判断进度条按钮是否处于按下状态。  当按钮处于按下状态时， moveProgressBar函数才会执行,当松开时则不执行。 
    const flagProgressBar = computed(() => store.state.ProgressBar.flagProgressBar);

    function moveProgressBar(e) {
        //  获取按下时 进度条百分比的。   
        const temporary = store.state.ProgressBar.temporaryTime;
        // 1.通过移动后的距离减去移动之前的距离等于移动的距离。
        // 2.在通过当前进度条的长度减去移动的距离等于  移动之后进度条的距离。
        // 3. 然后把移动之后的进度条距离转换为width的百分比，给到进度条。
        const moveDistance =
            (466 * temporary - (store.state.ProgressBar.clientX - e.clientX)) / 466;
        if (moveDistance >= 1) {
            // 4. 当移动之后距离的百分比超过了100%或等于100%。 都视为100%
            store.commit("ProgressBar/playTimeProgressBar", 1);
        } else if (moveDistance / 466 <= 0) {
            // 5.当移动之后距离的百分比低于0%或等于0%,都视为0%
            store.commit("ProgressBar/playTimeProgressBar", 0);
        } else {
            // 当移动之后距离的百分比 处于在0%~100%之间,直接赋值给进度条width
            const schedule = moveDistance.toFixed(7);
            store.commit("ProgressBar/playTimeProgressBar", schedule);

            //  歌曲播放中的时间 当audio中有歌曲时,则执行更改播放中的时间.
            store.state.PlaySong.presentSong && store.commit("PlaySong/ChangePlayingTime", (store.state.PlaySong.presentSong.$_time * store.state.ProgressBar.width).toFixed(7));



        }
    }
    return {
        flagProgressBar,
        moveProgressBar
    }
}